<template>
  <div class="operate-page mine-article" @click="operateArticle">
    <SelfAdaption>
      <template v-slot:selfBoxs>
        <div class="self-adaption-son" v-for="(article, index) of articles" :key="article.id">
          <SelfBox :info="{
            insert: article.headline,
            backgroundImage: article.cover_url || defaultConfig.ARTICLE_COVER,
            outsert: ''
          }" :to="{name: 'ArticleDisplay', params: {articleId: article.id}}">
          </SelfBox>
          <div class="operation-box flex">
            <div class="icon-box" data-operate-type="edit" :data-index="index"><Edit fill="black"/></div>
            <div class="icon-box" data-operate-type="delete" :data-index="index"><Delete fill="black"/></div>
          </div>
        </div>
      </template>
    </SelfAdaption>
  </div>
</template>

<script>
import Delete from '__SVG__/delete.svg'
import Edit from '__SVG__/edit.svg'
import { getArticlesByUserId } from '__SERVICE__/user.js'
import { destroy } from '__SERVICE__/article.js'
import SelfBox from '__COMPONENTS__/self_adaption/SelfBox.vue'
import SelfAdaption from '__COMPONENTS__/self_adaption/SelfAdaption.vue'
import { SAVE_USER_INFO } from '__STORE__/operation-type'
import defaultConfig from '__CONFIG__/base-config.js'
export default {
  name: 'MineArticle',
  components: { SelfAdaption, SelfBox, Delete, Edit },
  data:()=>({
    articles: []
  }),
  computed: {
    deadUserInfo() {
      return this.$store.state.user.deadUserInfo
    }
  },
  methods: {
    async getArticlesByUserId() {
      const { user_id } = this.deadUserInfo
      try { 
        const result = await getArticlesByUserId(user_id)
        const {data: {articles}} = result
        articles.forEach((article)=>{
          Object.freeze(article)
        })
        this.articles = articles
      }catch(e) {
        console.log(e.message)
      }
    },
    async operateArticle(e) {
      const target = e.target
      const tagName = target.tagName.toLowerCase()
      let iconBox
      if(tagName === 'svg' || tagName === 'path'){
      iconBox = e.path.find(function(el){
        return el.className === 'icon-box'
      })
      }else if(target.className === 'icon-box') {
        iconBox = target
      }else {
        console.log('查找元素错误')
        return // 直接结束 错误元素查找
      }
      const {user_id, access_token} = this.deadUserInfo
      const { operateType, index } = iconBox.dataset
      const id = this.articles[index].id
      if(operateType === 'delete') {
        this.articles.splice(index, 1)
        const result = await destroy({user_id, access_token, id}) //发送delete请求
        this.$store.dispatch(SAVE_USER_INFO,{ //更新token
          access_token: result.data.access_token
        })
      }else if(operateType === 'edit'){
        this.$router.push({
          name: 'AmendArticle', params: {articleId: id}
        })
      } else {
        return //错误查找
      }
    }
  },
  created() {
    this.defaultConfig = defaultConfig //加载默认配置
    //获取用户文章
    this.getArticlesByUserId();
  }
}
</script>

<style lang="less">
  @import url('__CSS__/mine_article/mine_article.less');
</style>